<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/stylesheets/reg.css">
    <script src="/javascripts/jquery.js"></script>
    <script src="/javascripts/angular.js"></script>
    <!--<script src="/javascripts/controller.js"></script>-->
    <script src="/plugin/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.css">
</head>
<body>
<main>
    <div class="logo"><a href="/"><img src="/images/logo.png" alt=""></a></div>
    <h2 id="h2">免费注册帐号</h2>
    <div class="floatright" ng-app="user_Reg">
        <div class="regBoard" ng-controller="userReg">
            <form class="form" name="regForm" ng-submit="processRegForm(regForm.$valid)" novalidate>
                <h2><small class="text-danger hide" id="errorInfo">邮箱格式不正确</small></h2>
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" class="form-control" name="userName" id="userName" ng-minlength="5"
                           ng-maxlength="12"
                           ng-model="regFormData.userName" ng-pattern="/^[a-zA-Z][a-zA-Z0-9_]{4,11}$/"
                           placeholder="请输入用户名"
                           required/>
                    <label style="display:inline-block;font-size: 15px;" ng-cloak for="inputError"
                           class="control-label text-danger"
                           ng-show="regForm.userName.$invalid && !regForm.userName.$pristine"><i
                                class="glyphicon glyphicon-info-sign"></i> 用户名首字母为字母5-12个英文数字组合</label>
                    <!--<input name="name" type="text" class="form-control a" placeholder="请输入用户名">-->
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"
                           ng-pattern="/(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{5,}/" ng-maxlength="12"
                           ng-model="regFormData.password" required/>
                    <label style="display:inline-block;width: 250px;font-size: 15px;" ng-cloak for="inputError"
                           class="control-label text-danger"
                           ng-show="regForm.password.$invalid && !regForm.password.$pristine"><i
                                class="glyphicon glyphicon-info-sign"></i> 6-12位，只能包含字母、数字和下划线</label>
                </div>
                <div class="form-group">
                    <label>确认密码</label>
                    <input type="password"
                           class="form-control"
                           pw-check="password" name="confirmPassword" id="confirmPassword" placeholder="请再次输入密码"
                           ng-model="regFormData.confirmPassword"
                           ng-pattern="/(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{5,}/"
                           ng-maxlength="12" required/>
                    <label style="display:inline-block;width: 250px;font-size: 15px;" ng-cloak for="inputError"
                           class="control-label text-danger"
                           ng-show="regForm.confirmPassword.$invalid && !regForm.confirmPassword.$pristine"><i
                                class="glyphicon glyphicon-info-sign"></i> 两次输入的密码不匹配</label>
                </div>
                <div class="form-group">
                    <label>邮箱地址</label>
                    <input type="email" class="form-control" name="email" id="email" placeholder="请输入邮箱地址"
                           ng-model="regFormData.email"
                           ng-pattern="/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/"
                           required/>
                    <label style="display:inline-block;width: 250px;font-size: 15px;" ng-cloak for="inputError"
                           class="control-label text-danger"
                           ng-show="regForm.email.$invalid && !regForm.email.$pristine"><i
                                class="glyphicon glyphicon-info-sign"></i> 请填写正确的QQ邮箱地址</label>
                    <!--<input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">-->
                </div>
                <label>预留问题(以便找回密码/更换密码)</label>
                <div class="form-group">
                    <label>真实姓名</label>
                    <input type="text" name="userPasswordOne" id="userPasswordOne" class="form-control" ng-minlength="2" placeholder="请输入答案" ng-model="regFormData.userPasswordOne" required>
                    <label style="display:inline-block;width: 250px;font-size: 15px;" ng-cloak for="inputError"
                           class="control-label text-danger"
                           ng-show="regForm.userPasswordOne.$invalid && !regForm.userPasswordOne.$pristine"><i
                                class="glyphicon glyphicon-info-sign"></i>至少两个文字</label>
                </div>
                <div class="form-group">
                    <label>就读学校</label>
                    <input type="text" name="userPasswordTwo" id="userPasswordTwo" class="form-control" ng-minlength="2" id="exampleInputEmail1" placeholder="请输入答案" ng-model="regFormData.userPasswordTwo" required>
                    <label style="display:inline-block;width: 250px;font-size: 15px;" ng-cloak for="inputError"
                           class="control-label text-danger"
                           ng-show="regForm.userPasswordTwo.$invalid && !regForm.userPasswordTwo.$pristine"><i
                                class="glyphicon glyphicon-info-sign"></i>至少两个文字</label>
                </div>
                <div class="form-group">
                    <label>所在年级</label>
                    <input type="text" name="userPasswordThree" id="userPasswordThree" class="form-control" ng-minlength="1" placeholder="请输入答案" ng-model="regFormData.userPasswordThree" required>
                    <label style="display:inline-block;width: 250px;font-size: 15px;" ng-cloak for="inputError"
                           class="control-label text-danger"
                           ng-show="regForm.userPasswordThree.$invalid && !regForm.userPasswordThree.$pristine"><i
                                class="glyphicon glyphicon-info-sign"></i>至少一个文字</label>
                </div>

                <button role="button" ng-disabled="regForm.$invalid" class="btn btn-primary" id="button">注册帐号</button>
                <button style="margin: 30px 0 30px 0" class="btn" id="back">取消注册</button>
            </form>
        </div>
    </div>
</main>
</body>
</html>
<script>
    var user_Reg = angular.module('user_Reg',[]);
    user_Reg.controller("userReg",function($scope,$http){
        $scope.processRegForm = function(isVaild){
            console.log($scope.regFormData);
            if(isVaild){
                $http({
                    method:'POST',
                    url:'/doReg',
                    data: $.param($scope.regFormData),
                    headers:{'Content-Type':'application/x-www-form-urlencoded'}
                }).success(function(data){
                    if (data === "success") {
                        alert('恭喜您,注册成功');
                        window.location = "<%= regBack %>";
                    } else {
                        $('#errorInfo').removeClass('hide').text(data)
                    }
                })
            }
        }
    })

    var back = document.querySelector('#back');
    back.onclick = function () {
        window.history.go(-1);
    }
</script>




